<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="file" multiple>
    <br>
    <img src="" height="200" alt="Image preview area..." title="preview-img">
    <script>
    var fileInput = document.querySelector('input[type=file]'),
        previewImg = document.querySelector('img');


    fileInput.addEventListener('change', function() {
        var file = this.files[0];
        var reader = new FileReader();

        // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
        reader.addEventListener("load", function() {
            previewImg.src = reader.result;
        }, false);
        // 调用reader.readAsDataURL()方法，把图片转成base64
        reader.readAsDataURL(file);
    }, false);

    </script>
</body>

</html>